<!doctype html>
<html>
    <head>
        <title>Chroma.js</title>
        <script type="text/javascript" src="../../chroma.js"></script>
    </head>
    <style type="text/css">
        body {
            font-family: Helvetica;
        }
        h1 {
            font-size: 18px;
        }
        .row {
            margin-bottom: 10px;
        }
        .left,
        .right {
            display: inline-block;
            margin-right: 20px;
            position: relative;
        }
        .swatch {
            display: inline-block;
            width: 60px;
            height: 50px;
        }
        .swatch.overlay {
            position: absolute;
            left: 60px;
        }
    </style>
    <body>
        <script type="text/javascript">
            var names = Object.keys(chroma.colors),
                l = names.length;

            var cssMap = {
                dodge: 'color-dodge',
                burn: 'color-burn'
            };

            Object.keys(chroma.blend).forEach(function (mode) {
                document.write('<h1>' + mode + '</h1>');
                for (var i = 0; i < 10; i++) {
                    var row = el('div.row'),
                        left = el('div.left'),
                        right = el('div.right');

                    var bottom = names[Math.floor(Math.random() * l)],
                        top = names[Math.floor(Math.random() * l)];

                    swatch(bottom, left);
                    swatch(chroma.blend(bottom, top, mode).hex(), left);
                    swatch(top, left);

                    swatch(bottom, right);
                    swatch(bottom, right);
                    var s = swatch(top, right);
                    s.className = 'swatch overlay';
                    s.style.mixBlendMode = cssMap[mode] || mode;
                    swatch(top, right);
                }
            });

            function swatch(color, parent) {
                var s = el('div.swatch', parent);
                s.setAttribute('title', color);
                s.style.background = color;
                return s;
            }

            function el(t, parent) {
                var p = t.split('.');
                var e = document.createElement(p[0]);
                if (p[1]) e.className = p[1];
                (parent || document.body).appendChild(e);
                return e;
            }
        </script>
    </body>
</html>
